import React, { Component } from 'react'
import { Card, Form, Input, Button ,Upload, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
// 引入富文本
import E from 'wangeditor'
import { addArt } from 'api'

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 4,
    span: 20,
  },
};

export default class ArtAdd extends Component {
	constructor() {
		super();
		
		this.state = {
			url: '',// 保存 上传图片返回的地址
			editor:null
		}
	}
	render() {
			
		/* 
		上传图片控件配置 
		 */
		let _this = this;
		const props = {
		  name: 'file',
		  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
		  headers: {
		    authorization: 'authorization-text',
		  },
		  onChange(info) {
		    if (info.file.status !== 'uploading') {
		      console.log(info.file, info.fileList);
		    }
		    if (info.file.status === 'done') {
		      message.success(`${info.file.name} 图片成功上传`);
					console.log(info);
					// 成功上传 增加 文章封面图片字段
					const { url } = info.file.response;
					_this.setState({
						url
					})
					
		    } else if (info.file.status === 'error') {
		      message.error(`${info.file.name} 上传失败.`);
		    }
		  },
		}
		/*
		上传图片控件配置 
		 */
		return (
			<Card title="增加文章">
				 <Form
				      {...layout}
				      name="basic"
				      onFinish={ this.onSubmit}
				    >
				      <Form.Item
				        label="文章标题"
				        name="title"
				        rules={[
				          {
				            required: true,
				            message: '请输入文章标题!',
				          },
				        ]}
				      >
				        <Input />
				      </Form.Item>
				
				      <Form.Item
				        label="作者"
				        name="author"
				        rules={[
				          {
				            required: true,
				            message: '请输入作者!',
				          },
				        ]}
				      >
				        <Input />
				      </Form.Item>
							<Form.Item
								label="描述"
								name="desc"
							>
								<Input.TextArea  />
							</Form.Item>
							<Form.Item 
								label="封面图片">
								<Upload {...props}>
								    <Button icon={<UploadOutlined />}>Click to Upload</Button>
								  </Upload>
							</Form.Item>
							<Form.Item
								label="内容">
								<div id="content"></div>
							</Form.Item>
				      <Form.Item {...tailLayout}>
				        <Button type="primary" htmlType="submit">
				          增加
				        </Button>
				      </Form.Item>
				    </Form>
			</Card>
		)
	}
	componentDidMount(){
		// 初始化富文本编辑器
		const editor = new E("#content");
		editor.create();
		this.setState({
			editor
		})
	}
	onSubmit = (value) =>{
		
			console.log(this.state.editor.txt.html())
			const upLoad = {
				pic: this.state.url,
				...value,
				createAt: Date.now(),
				readCount: 0,
				content:this.state.editor.txt.html()
			}
			// 提交
			addArt(upLoad).then(res=>{
				if(res.data.code === '200'){
					// 弹出消息提醒
					message.success(res.data.msg, 1, ()=>{
						this.props.history.go(0)
					});
					
				}
			})
	}
}
